<template>
    <div class="sys-pos-container">
        <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <el-form :model="state.ruleForm" ref="ruleFormRef" class="fl" label-width="auto">
                <el-form-item label="容器类型" prop="dictTypeName"
                    :rules="[{ required: true, message: '容器类型不能为空', trigger: 'blur' }]">
                    <el-select v-model="state.ruleForm.dictTypeName" placeholder="请选择容器类型" style="width: 240px"
                        @blur="getUserClickID">
                        <el-option v-for="item in state.containerTypes" :key="item.value" :label="item.name"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="容器编号" prop="code">
                    <el-input v-model="state.ruleForm.code" />
                </el-form-item>
                <el-form-item label="规格名称" prop="name">
                    <el-input v-model="state.ruleForm.name" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="state.ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用"
                        :active-value="1" :inactive-value="0" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="state.ruleForm.remark" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="sysEditPos">
import { reactive, ref } from 'vue';

import { getAPI } from '/@/utils/axios-utils';
import { SysDictDataApi, SysPosApi } from '/@/api-services/api';
import { WmsApi } from '/@/api/wh';
import { ElMessage } from 'element-plus';

const props = defineProps({
    title: String,
});
const emits = defineEmits(['handleQuery']);
const dictType1 = ref(0)
const dictType2 = ref(0)
const ruleFormRef = ref();
const state = reactive({
    isShowDialog: false,
    ruleForm: {
        dictTypeName:'',
        dictTypeId:0
    },
    containerTypes: [],
    inquireInfo:
        [
            {
                label: "容器类型",
                value: "",
                key: "dictTypeId",
                options: [],
                type: "select",
            }],
    queryParams: {
        page: 0,
        pagesize: 20,
        dictTypeId: 0
    },
  
    isEditing:false
});

// 打开弹窗
const openDialog =async(row: any,isEditing:any) => {
    var res = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('container_type');
    state.containerTypes = res.data.result;
    console.log(state.containerTypes);
    
   state.containerTypes.map(async (containerType, i) => {  
        //使用闭包和Promise.all处理
        
    // 返回一个新的 Promise，它将调用 WmsApi().getUserClickContainID 并处理结果  
    const res = await WmsApi().getUserClickContainID({
            "code": containerType.value
        });
        console.log(res);
        //    if(res.data.result.items.length > 0){
        const tempID = res.data.result.items[0].id;
        const option = { value: tempID, label: containerType.name };
        // 重要的是在这里 push，而不是在循环的同步部分  
        state.inquireInfo[0].options.push(option); 
      
    })
    state.isEditing=isEditing
    console.log(row);
    state.ruleForm = row;
    state.isShowDialog = true;
    ruleFormRef.value?.resetFields();

};

// 关闭弹窗
const closeDialog = () => {
    emits('handleQuery');
    state.isShowDialog = false;


};

const getUserClickID = () => {
    console.log(state.ruleForm.dictTypeName);

    WmsApi().getUserClickContainID({
        "code": state.ruleForm.dictTypeName
    }).then(
        res => {
            //根据得到的Name给到ID
            state.ruleForm.dictTypeID = res.data.result.items[0].id
        }
    ).catch(
        err => {
            console.log(err);
        }
    )

}
// 取消
const cancel = () => {
    state.isShowDialog = false;
};

// 提交
const submit = () => {
    ruleFormRef.value.validate(async (valid: boolean) => {
        if (!valid) return;
        if (state.isEditing) {
            console.log(state.ruleForm);
            state.ruleForm.value = state.ruleForm.code;
            await WmsApi().modifyDict(state.ruleForm)
                .then(function (res) {
                    ElMessage.success('修改成功');
                    closeDialog();
                })
                .catch(function (error) {
                    console.log(error);
                });
        } else {
            state.ruleForm.value = state.ruleForm.code;
            await WmsApi().addNewDict(state.ruleForm)
                .then(function (res) {
                    ElMessage.success('新增成功');
                    closeDialog();
                })
                .catch(function (error) {
                    console.log(error);
                });

        }
    });
}

// 导出对象
defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.fl {
    width: 70%;
    margin: 20px auto;
}
</style>